<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	    <meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
	    <meta content="yes" name="apple-mobile-web-app-capable" />
	    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
	    <meta content="telephone=no" name="format-detection" />
	    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	    <link rel="stylesheet" type="text/css" href="css/style.css"/>
		<title>校咖汇</title>
	</head>
	<body id="allModel">
		<script src="js/mui.min.js"></script>
		<script src="js/template.js"></script>
		<script src="js/personal_info.html.js"></script>
		<script id="modelContent" type="text/html">
			<nav class="foot-bar-tab">
				<a class="foot-tab-item" href="advice.html">
					<span class="foot-icon foot-icon-advice"></span>
					<span class="foot-tab-label">在线咨询</span>
				</a>
				<a class="foot-tab-item" href="contact.html">
					<span class="foot-icon foot-icon-tel"></span>
					<span class="foot-tab-label">联系TA</span>
				</a>
			</nav><!--底部条-->
			<div class="mui-content mui-scroll-wrapper per-content">
				<div class="mui-scroll">
				    <header class="person-header">
				    	<figure>
				    		<img src={{photo}} />
				    		<figcaption>
				    			<h1>{{personName}}</h1>
				    			<p>{{personShcool}}</p>
				    		</figcaption>
				    	</figure>
				    	<div class="site">
				    		<p class="location">
				    			<span class="mui-icon mui-icon-location-filled"></span>
				    			{{location}}
				    		</p>
				    		<p class="num">
				    		<span class="mui-icon mui-icon-eye"></span>
				    			{{num}}
				    		</p>
				    	</div>
				    </header><!--头部-->
				    {{each module as value i }}{{if i==0}}
					    <div class="class-module">
							<h1>
								<span class="class-module-intro">{{value.title}}</span>
								<div class="line"></div>
							</h1><!--标题-->
							<div class="per-intro">
								<p>{{value.article}}</p>
							</div>
						</div><!--关于ta-->{{/if}} {{if i==1}}
						<div class="class-module">
							<h1>
								<span class="class-module-skill">{{value.title}}</span>
								<div class="line"></div>
							</h1><!--标题-->
							<div class="skill-list">
								{{each module[i].list as value j}}
									<div class="skill-list-item">
										<h2><a href={{value.link}}>{{value.title}}</a></h2>
										{{if j==0}}
										<div id="slider" class="mui-slider">
											<div class="mui-slider-group mui-slider-loop">
												<div class="mui-slider-item mui-slider-item-duplicate">
													<a href={{value.vedio[value.vedio.length-1].link}}>
														<img src={{value.vedio[value.vedio.length-1].route}}/>
													</a>
												</div><!--最后一张图利-->
									    		{{each module[i].list[j].vedio as value i}}
									    			<div class="mui-slider-item">
														<a href={{value.link}}>
															<img src={{value.route}}/>
														</a>
													</div>
									    		{{/each}}
									    		<div class="mui-slider-item mui-slider-item-duplicate">
													<a href={{value.vedio[0].link}}>
														<img src={{value.vedio[0].route}}/>
													</a>
												</div><!--第一张图片-->
											</div>
											<div class="mui-slider-indicator">
												{{each module[i].list[j].vedio as value i}} {{if i==0}}
													<div class='mui-indicator mui-active'></div>
												{{/if}} {{if i>0}}
													<div class='mui-indicator'></div>
												{{/if}}{{/each}}
											</div>
										</div><!--视频列表-->
										{{/if}} {{if j==1}}
										<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
											<div class="mui-scroll">
												{{each module[i].list[j].img as value i}}
													<a class="mui-control-item" href={{value.link}}>
														<img src={{value.route}} />
													</a>
												{{/each}}
											</div>
										</div><!--列表-->
										{{/if}} {{if j==2}}
											<figure class="skill-item-img">
												<img src={{value.imageLink}} />
												<figcaption>
													<h3>{{value.name}}</h3>
													<p>{{value.details}}</p>
												</figcaption>
											</figure>
										{{/if}}
										<div class="skill-intro">
											<header>
												<h4>{{value.skillName}}</h4>
												<p><span class="icon-price"></span>{{value.skillPrice}}</p>
											</header>
											<p class="skill-intro-body">{{value.skillIntro}}</p>
											<span class="mui-icon mui-icon-eye">{{value.num}}</span>
										</div>
									</div>
								{{/each}}
							</div>
						</div><!--TA的技能-->
					{{/if}} {{/each}}
				</div>
			</div><!--主体内容-->
		</script>
		<script>
			(function($){
				mui.init();
				//页面数据
				var data = template('modelContent',myData);
				document.getElementById('allModel').innerHTML = data;
				
				//禁用滚动条
				document.getElementsByTagName('body')[0].addEventListener('touchmove', function (e) {
				  e.preventDefault();
				});
				
				//自定义滚动条
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: true,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				
				//视频轮播
				var slider = mui("#slider");
				slider.slider({
					interval: 3000
				});
			})(mui);
		</script>
	</body>
</html>
